<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="心血管十年风险量表">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div>

      <a-tabs v-model="activeKey" hide-add @click="changeAngiocardiopathy()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs>
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.output">
            <span class="ant-form-text">
              {{ evalution1.output }}
            </span>
          </a-form-model-item>

          <a-form-model-item label="1.您的性别">
            <a-radio-group v-model="radios.radio1" :options="options1" />
          </a-form-model-item>
          <a-form-model-item label="2.您的年龄">
            <a-radio-group v-model="radios.radio2" :options="options2" />
          </a-form-model-item>
          <a-form-model-item label="3.您的收缩压（mmHg）">
            <a-radio-group v-model="radios.radio3" :options="options3" />
          </a-form-model-item>
          <a-form-model-item label="4.您的BMI体质指数（kg/m²）">
            <a-radio-group v-model="radios.radio4" :options="options4" />
          </a-form-model-item>
          <a-form-model-item label="5.您的总胆固醇（mmol/L）">
            <a-radio-group v-model="radios.radio5" :options="options5" />
          </a-form-model-item>
          <a-form-model-item label="6.是否有吸烟史">
            <a-radio-group v-model="radios.radio6" :options="options6" />
          </a-form-model-item>
          <a-form-model-item label="7.是否患有糖尿病">
            <a-radio-group v-model="radios.radio7" :options="options7" />
          </a-form-model-item>

          <div class="footer" v-if="!evalution1.output">
            <a-button
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postAngiocardiopathy()"
            >
              评估
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
    <a-card style="margin-top: 24px" :bordered="false" title="心血管疾病危险因素评分表（表1）">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="男性应用此表" :bordered="false">
            <a-table :columns="table1Columns" :data-source="table1ManData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="女性应用此表" :bordered="false">
            <a-table :columns="table1Columns" :data-source="table1WomanData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
      </a-row>
      <p>
        注：由上述评分表格（表1）得出总分后，参照以下表格（表2）根据总分对应10年发生缺血性心血管疾病绝对危险的百分比（男女对应不同表格）
      </p>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="根据总分10年缺血性心血管病发病绝对危险（表2）">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="男性应用此表" :bordered="false">
            <a-table :columns="table2Columns" :data-source="table2ManData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="女性应用此表" :bordered="false">
            <a-table :columns="table2Columns" :data-source="table2WomanData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
      </a-row>
      <p>
        注：根据总分10年缺血性心血管病发病绝对危险所得百分比（表2）对照下表（表3），算得与同龄人群的平均危险与最低危险的倍数
      </p>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="10年缺血性心血管病绝对危险参考标准（表3）">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="男性应用此表" :bordered="false">
            <a-table :columns="table3Columns" :data-source="table3ManData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="女性应用此表" :bordered="false">
            <a-table :columns="table3Columns" :data-source="table3WomanData" size="small" :pagination="false"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </a-spin>
</template>

<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const options1 = [
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]
const options2 = [
  { label: '35~39岁', value: 0 },
  { label: '40~44岁', value: 1 },
  { label: '45~49岁', value: 2 },
  { label: '50~54岁', value: 3 },
  { label: '55~59岁', value: 4 },
  { label: '>=60岁', value: 5 }
]
const options3 = [
  { label: '<120', value: 0 },
  { label: '120~129', value: 1 },
  { label: '130~139', value: 2 },
  { label: '140~159', value: 3 },
  { label: '160~179', value: 4 },
  { label: '>=180', value: 5 }
]
const options4 = [
  { label: '<24', value: 0 },
  { label: '24~27.9', value: 1 },
  { label: '>=28', value: 2 }
]
const options5 = [
  { label: '<5.20', value: 0 },
  { label: '>=5.20', value: 1 }
]
const options6 = [
  { label: '否', value: 0 },
  { label: '是', value: 1 }
]
const options7 = [
  { label: '否', value: 0 },
  { label: '是', value: 1 }
]
export default {
  name: 'Angiocardiopathy',
  mixins: [EvalutionMixin],
  data() {
    var panes = []

    return {
      loading: true,
      angiocardiopathy: {},
      evalution1: {
        output: ''
      },
      savaRes: [],
      buttonStatus: false,
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      input: [],
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },

      radios: {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: '',
        radio5: '',
        radio6: '',
        radio7: ''
      },
      activeKey: panes.content,
      panes,
      newTabIndex: 0,
      url: {
        postAngiocardiopathy: '100/17/10017092',
        getAngiocardiopathy: '105/25/1052503'
      },
      table1Columns: [
        {
          title: '因素',
          dataIndex: 'yinsu',
          key: 'yinsu'
        },
        {
          title: '患者档案对应条件',
          dataIndex: 'tiaojian',
          key: 'tiaojian'
        },
        {
          title: '得分',
          dataIndex: 'defen',
          key: 'defen'
        }
      ],
      table1ManData: [
        {
          yinsu: '年龄(岁)',
          tiaojian: '基础档案-年龄',
          defen: ''
        },
        {
          yinsu: '35~39',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '40~44',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '45~49',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '50~54',
          tiaojian: '',
          defen: 3
        },
        {
          yinsu: '55~60',
          tiaojian: '',
          defen: 4
        },
        {
          yinsu: '≥60',
          tiaojian: '',
          defen: '每增加5岁加1分'
        },
        {
          yinsu: '收缩压(mmHg)',
          tiaojian: '体格检查-血压',
          defen: ''
        },
        {
          yinsu: '<120',
          tiaojian: '',
          defen: -2
        },
        {
          yinsu: '120~129',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '130~139',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '140~159',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '160~179',
          tiaojian: '',
          defen: 5
        },
        {
          yinsu: '≥180',
          tiaojian: '',
          defen: 8
        },
        {
          yinsu: '体质指数(kg/m2)',
          tiaojian: '体格检查-BMI',
          defen: ''
        },
        {
          yinsu: '<24',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '24~27.9',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '≥28',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '总胆固醇(mmol/L)',
          tiaojian: '实验室检查-总胆固醇',
          defen: ''
        },
        {
          yinsu: '<5.20',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '≥5.20',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '吸烟',
          tiaojian: '病史-吸烟',
          defen: ''
        },
        {
          yinsu: '否',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '是',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '糖尿病',
          tiaojian: '',
          defen: ''
        },
        {
          yinsu: '否',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '是',
          tiaojian: '',
          defen: 1
        }
      ],
      table1WomanData: [
        {
          yinsu: '年龄(岁)',
          tiaojian: '基础档案-年龄',
          defen: ''
        },
        {
          yinsu: '35~39',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '40~44',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '45~49',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '50~54',
          tiaojian: '',
          defen: 3
        },
        {
          yinsu: '55~60',
          tiaojian: '',
          defen: 4
        },
        {
          yinsu: '≥60',
          tiaojian: '',
          defen: '每增加5岁加1分'
        },
        {
          yinsu: '收缩压(mmHg)',
          tiaojian: '体格检查-血压',
          defen: ''
        },
        {
          yinsu: '<120',
          tiaojian: '',
          defen: -2
        },
        {
          yinsu: '120~129',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '130~139',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '140~159',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '160~179',
          tiaojian: '',
          defen: 3
        },
        {
          yinsu: '≥180',
          tiaojian: '',
          defen: 4
        },
        {
          yinsu: '体质指数(kg/m2)',
          tiaojian: '体格检查-BMI',
          defen: ''
        },
        {
          yinsu: '<24',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '24~27.9',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '≥28',
          tiaojian: '',
          defen: 2
        },
        {
          yinsu: '总胆固醇(mmol/L)',
          tiaojian: '实验室检查-总胆固醇',
          defen: ''
        },
        {
          yinsu: '<5.20',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '≥5.20',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '吸烟',
          tiaojian: '病史-吸烟',
          defen: ''
        },
        {
          yinsu: '否',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '是',
          tiaojian: '',
          defen: 1
        },
        {
          yinsu: '糖尿病',
          tiaojian: '',
          defen: ''
        },
        {
          yinsu: '否',
          tiaojian: '',
          defen: 0
        },
        {
          yinsu: '是',
          tiaojian: '',
          defen: 2
        }
      ],
      table2Columns: [
        {
          title: '总分',
          dataIndex: 'zongfen',
          key: 'zongfen'
        },
        {
          title: '绝对危险（%）',
          dataIndex: 'weixian',
          key: 'weixian'
        }
      ],
      table2ManData: [
        {
          zongfen: '≤-1',
          weixian: '0.3'
        },
        {
          zongfen: '0',
          weixian: '0.5'
        },
        {
          zongfen: '1',
          weixian: '0.6'
        },
        {
          zongfen: '2',
          weixian: '0.8'
        },
        {
          zongfen: '3',
          weixian: '1.1'
        },
        {
          zongfen: '4',
          weixian: '1.5'
        },
        {
          zongfen: '5',
          weixian: '2.1'
        },
        {
          zongfen: '6',
          weixian: '2.9'
        },
        {
          zongfen: '7',
          weixian: '3.9'
        },
        {
          zongfen: '8',
          weixian: '5.4'
        },
        {
          zongfen: '9',
          weixian: '7.3'
        },
        {
          zongfen: '10',
          weixian: '9.7'
        },
        {
          zongfen: '11',
          weixian: '12.8'
        },
        {
          zongfen: '12',
          weixian: '16.8'
        },
        {
          zongfen: '13',
          weixian: '21.7'
        },
        {
          zongfen: '14',
          weixian: '27.7'
        },
        {
          zongfen: '15',
          weixian: '35.3'
        },
        {
          zongfen: '16',
          weixian: '44.3'
        },
        {
          zongfen: '≥17',
          weixian: '≥52.6'
        }
      ],
      table2WomanData: [
        {
          zongfen: '≤-2',
          weixian: '0.1'
        },
        {
          zongfen: '-1',
          weixian: '0.2'
        },
        {
          zongfen: '0',
          weixian: '0.2'
        },
        {
          zongfen: '1',
          weixian: '0.2'
        },
        {
          zongfen: '2',
          weixian: '0.3'
        },
        {
          zongfen: '3',
          weixian: '0.5'
        },
        {
          zongfen: '4',
          weixian: '1.5'
        },
        {
          zongfen: '5',
          weixian: '2.1'
        },
        {
          zongfen: '6',
          weixian: '2.9'
        },
        {
          zongfen: '7',
          weixian: '3.9'
        },
        {
          zongfen: '8',
          weixian: '5.4'
        },
        {
          zongfen: '9',
          weixian: '7.3'
        },
        {
          zongfen: '10',
          weixian: '9.7'
        },
        {
          zongfen: '11',
          weixian: '12.8'
        },
        {
          zongfen: '12',
          weixian: '16.8'
        },
        {
          zongfen: '≥13',
          weixian: '≥21.7'
        }
      ],
      table3Columns: [
        {
          title: '年龄（岁）',
          dataIndex: 'nianling',
          key: 'nianling'
        },
        {
          title: '平均危险(%)',
          dataIndex: 'pjweixian',
          key: 'pjweixian'
        },
        {
          title: '最低危险(%)',
          dataIndex: 'zdweixian',
          key: 'zdweixian'
        }
      ],
      table3ManData: [
        {
          nianling: '35~39',
          pjweixian: '1.0',
          zdweixian: '0.3'
        },
        {
          nianling: '40~44',
          pjweixian: '1.4',
          zdweixian: '0.4'
        },
        {
          nianling: '45~49',
          pjweixian: '1.9',
          zdweixian: '0.5'
        },
        {
          nianling: '50~54',
          pjweixian: '2.6',
          zdweixian: '0.7'
        },
        {
          nianling: '55~59',
          pjweixian: '3.6',
          zdweixian: '1.0'
        }
      ],
      table3WomanData: [
        {
          nianling: '35~39',
          pjweixian: '0.3',
          zdweixian: '0.1'
        },
        {
          nianling: '40~44',
          pjweixian: '0.4',
          zdweixian: '0.1'
        },
        {
          nianling: '45~49',
          pjweixian: '0.6',
          zdweixian: '0.2'
        },
        {
          nianling: '50~54',
          pjweixian: '0.9',
          zdweixian: '0.3'
        },
        {
          nianling: '55~59',
          pjweixian: '1.4',
          zdweixian: '0.5'
        }
      ]
    }
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    },

    add() {
      this.buttonStatus = true
      this.radios = []
      this.evalution1.output = ''
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.unshift({
        title: '请开始填写',
        key: activeKey,
        closable: false
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  },
  created() {
    this.getAngiocardiopathy()
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
/* .footer {
  text-align: center;
} */
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
</style>

